<template>
    <div class="contract">
        <ContentWrap class="left">
            <div class="card-header">
                <button>返回列表</button>
            </div>
            <div class="main">
                <h3 class="title">水泥购销合同</h3>
                <div class="address">
                    <Icon class="mr-5px" icon="ep:location" />
                    太原市小店区长风街98号
                </div>

                <div class="main-tit">
                    <div class="main-content">
                        <p class="main-p" style="  margin: 20px 0px;">基本信息</p>
                        <div class="main-hez">
                            <div class="main-left">
                                <div class="mg">
                                    <p class="pg" style="margin-right: 20px;">司机车辆：<span>闵D12345/张小凡</span></p>
                                    <p class="pg">车辆类别：<span>搅拌车</span></p>
                                </div>
                                <div class="mg">
                                    <p class="pg" style="margin-right: 47px;">联系电话：<span>13400661517</span></p>
                                    <p class="pg">配送数量：<span>50吨</span></p>
                                </div>
                                <p class="pg">到达时间：<span>2022-10-18 10:10</span></p>
                                <div class="mg">
                                    <p class="pg" style="margin-right: 20px;">确认收货：<span>2022-10-15 10:10</span></p>
                                    <p class="pg">签收账号：<span>李小四</span></p>
                                </div>
                                <div class="mg">配送进度：<el-progress :percentage="50" /></div>

                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <p class="main-p">到货照片</p>
                    <div class="imgurll">
                        <img class="imgs" src="../../../assets/imgs/avatar.gif" alt="">
                        <img class="imgs" src="../../../assets/imgs/avatar.gif" alt="">
                        <img class="imgs" src="../../../assets/imgs/avatar.gif" alt="">
                        <img src="../../../assets/imgs/avatar.gif" alt="">
                    </div>
                </div>
                <div>
                    <p class="main-p">签收凭证</p>
                    <div class="imgurll">
                        <img class="imgs" src="../../../assets/imgs/avatar.gif" alt="">
                        <img class="imgs" src="../../../assets/imgs/avatar.gif" alt="">
                        <img class="imgs" src="../../../assets/imgs/avatar.gif" alt="">
                        <img src="../../../assets/imgs/avatar.gif" alt="">
                    </div>
                </div>

                <div>
                    <p class="main-p">月配送记录</p>
                    <div class="main-fo">
                        <el-table :data="tableData" style="height: 180px;">
                            <el-table-column prop="date" label="订单号" width="150px" />
                            <el-table-column prop="name" label="配送进度/总量" width="170px" />
                            <el-table-column prop="address" label="配送时间" width="150px" />
                        </el-table>
                    </div>
                </div>
            </div>
        </ContentWrap>
        <ContentWrap class="right">
            <div id="map"></div>
        </ContentWrap>
    </div>
</template>

<script setup lang="ts">
import AMapLoader from "@amap/amap-jsapi-loader"

const mapInstance = ref<any>(null);

let locationArr = ref<number[]>([118.182547, 24.488449])
// 初始化地图
const initMapInstance = (AMap) => {
    // 生成地图的参数，具体可详见高德api文档
    const option: { [key: string]: any } = {};
    mapInstance.value = new AMap.Map("map", {
        option,
        viewMode: "3D",    //是否为3D地图模式
        zoom: 14,          //初始化地图级别
        center: locationArr.value //地图中心位置
    })
    // }

};

// 在loadMap方法的then里面调用初始化地图
const loadAMap = () => {
    AMapLoader.load({
        key: "dbf568ee28ba003bd7917581b5e97c61",
        version: "2.0",
        plugins: [
            'AMap.ToolBar',
            'AMap.Scale',
            'AMap.Geolocation',
            'AMap.PlaceSearch',
            'AMap.AutoComplete',
            'AMap.Geocoder',
            'AMap.CitySearch'
        ],// 你所使用到的插件
    }).then((AMap) => {
        initMapInstance(AMap);
        const marker = new AMap.Marker({
            // icon: icon,
            // content,
            // position: new AMap.LngLat(116.397428, 39.90923), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
            position: locationArr.value, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
            title: "",
            offset: new AMap.Pixel(-10, -30)
        });

        // 将创建的点标记添加到已有的地图实例：
        mapInstance.value.add(marker);
    });
};

onMounted(() => {
    loadAMap();
})

// 表格
const tableData = []


</script>


<style lang="scss" scoped>
.main-p {
    font-size: 16px;
    font-weight: 500;
}

// 文字前面的点
.main-p::before {
    content: "●";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 10px;
    color: rgba(81, 123, 255, 1);
    ;
}

.contract {
    display: flex;
    width: 100%;
    height: 100%;


    .left {
        border-radius: 20px;
        margin-right: 20px;
        height: 100%;

        .main {
            .title {
                font-size: 22px;
                font-weight: 500;
                margin: 24px 0px 0px 0px;
            }

            .main-tit {
                .main-content {
                    margin-bottom: 7px;

                    .main-hez {
                        display: flex;
                        border-radius: 16px;
                        background: rgba(249, 250, 255, 1);
                        padding: 24px;

                        .main-left {
                            .pg {
                                font-size: 16px;
                                font-weight: 500;
                                letter-spacing: 0px;
                                line-height: 23.17px;
                                color: rgba(0, 0, 0, 0.6);
                                margin-bottom: 14px;

                                span {
                                    color: rgba(0, 0, 0, 1);
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    .address {
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0px;
        line-height: 20.27px;
        color: rgba(0, 0, 0, 0.4);
    }

    .imgurll {
        display: flex;

        img {
            width: 100px;
            height: 74px;
            border-radius: 10px;
        }

        .imgs {
            margin-right: 22px;
        }
    }

    .right {
        flex: 1;
        border-radius: 20px;

        #map {
            width: 1050px;
            height: 800px;
            border-radius: 20px;
        }
    }

}

.mg {
    display: flex;
}

.el-progress {
    width: 50%;
}


::v-deep .amap-logo {
    opacity: 0 !important;
}

::v-deep .amap-copyright {
    opacity: 0 !important;
}
</style>